<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #id1{
            width: 400px;
            height: 400px;
            background-color: aqua;
            text-align: center;
        }
        #id2{
            width: 300px;
            height: 300px;
            background-color: bisque;
            position: absolute;
            left: 50px;
            right: 50px;
            top: 50px;
            bottom: 50px;
            text-align: center;
        }
        #id3{
            width:200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: 50px;
            right: 50px;
            top: 50px;
            bottom: 50px;
        }
        #id4{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            left: 50px;
            right: 50px;
            top: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <!-- 4.制作4个嵌套DIV ，要求：
      1.每个父DIV尺寸必须大于子DIV
      2.实现每个DIV在父DIV正中间
      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
      4.通过最底层DIV，打印每层父DIV，如：
	1级父元素为（），1级父节点为（）
	2级父元素为（），2级父节点为（）
	....
      5.查找每个DIV的子元素和子节点 -->
      <div id="id1">
          这是第一个DIV
         <div id="id2">
             <p>这是一个p标签</p>
            <div id="id3">
                   淘宝
                <div id="id4">
                    <img src="./img/src=http___img80.nipic.com_file_20170122_7238667_123909050030_1.jpg&refer=http___img80.nipic.jpg" alt="">
                </div>
            </div>
         </div>
      </div>
</body>
<script type="text/javascript">
//   4.通过最底层DIV，打印每层父DIV，如：
// 	1级父元素为（），1级父节点为（）
// 	2级父元素为（），2级父节点为（）
// 	....
    //使用Element打印id4的1级父元素
    var div4Obj1 =document.getElementById('id4')
    console.log(div4Obj1.parentElement)
    //打印id4的2级父元素
    var div4Obj2 =document.getElementById('id4')
    console.log(div4Obj2.parentElement.parentElement)
    //打印id4的3级父元素
    var div4Obj3 =document.getElementById('id4')
    console.log(div4Obj3.parentElement.parentElement.parentElement)
    //打印id4的1级父节点
    var div4Obj11 =document.getElementById('id4')
    console.log(div4Obj11.parentNode)
    //打印id4的2级父节点
    var div4Obj12 =document.getElementById('id4')
    console.log(div4Obj12.parentNode.parentNode)
    //打印id4的3级父节点
    var div4Obj13 =document.getElementById('id4')
    console.log(div4Obj13.parentNode.parentNode.parentNode)
    // 5.查找每个DIV的子元素和子节点 -->
    //id1的子元素
    var SeaDiv1Obj1 =document.getElementById('id1')
    console.log(SeaDiv1Obj1.children)
    //id1的子节点
    var SeaDiv1Ojb11 =document.getElementById('id1')
    console.log(SeaDiv1Ojb11.childNodes)
    //id2的子元素
    var SeaDiv2Obj2 =document.getElementById('id2')
    console.log(SeaDiv2Obj2.children)
    //id2的子节点
    var SeaDiv2Obj22 =document.getElementById('id2')
    console.log(SeaDiv2Obj22.childNodes)
    //id3的子元素
    var SeaDiv3Obj3 =document.getElementById('id3')
    console.log(SeaDiv3Obj3.children)
    //id3的子节点
    var SeaDiv3Obj33 =document.getElementById('id3')
    console.log(SeaDiv3Obj33.childNodes)
   //id4的子元素
   var SeaDiv4Obj4 =document.getElementById('id4')
   console.log(SeaDiv4Obj4.children)
   //id4的子节点
   var SeaDivObj44 =document.getElementById('id4')
   console.log(SeaDivObj44.childNodes)
</script>
</html>